import React, { useEffect } from "react"
import { ConfigProvider, theme } from "antd"
import zhCN from "antd/locale/zh_CN"
import AuthRouter from "@/router/utils/AouthRouter"
import Router from "@/router"
import "./App.less"
import { useAppSelector } from "./store"
import { shallowEqual } from "react-redux"
function App() {
	const { themeKey, primary } = useAppSelector(
		(state) => ({
			themeKey: state.layoutStore.themeKey,
			primary: state.layoutStore.primary,
		}),
		shallowEqual,
	)
	useEffect(() => {
		const body = document.body
		const flag = Array.from(body.classList).includes("dark")
		themeKey === "light"
			? flag && body.classList.remove("dark")
			: !flag && body.classList.add("dark")
	}, [themeKey])
	return (
		<div className="App">
			<ConfigProvider
				theme={{
					algorithm:
						themeKey === "light" ? theme.defaultAlgorithm : theme.darkAlgorithm,
					token: {
						colorPrimary: primary,
					},
				}}
				locale={zhCN}
			>
				<AuthRouter>
					<Router />
				</AuthRouter>
			</ConfigProvider>
		</div>
	)
}

export default App
